<!-- 查看参与人数弹窗 -->
<template>
  <div>
    <el-dialog
      top="4%"
      v-model="visible"
      width="60%"
      @close="onClose"
      :show-close="true"
      draggable
    >
      <template #title>
        <p class="dialog-title">参赛列表</p>
      </template>
      <body>
        <div class="searchContent">
          <el-input
            v-model="searchContent.keyWord"
            placeholder="请输入提交人姓名"
            style="width: 1.1rem; margin-right: 0.1rem"
          />
          <el-select
            v-model="searchContent.selected"
            class="m-2"
            placeholder="请选择"
            clearable
            style="
              width: 1.1rem;
              position: relative;
              top: -0.028rem;
              margin-right: 0.1rem;
            "
          >
            <el-option
              v-for="item in selectedOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              ><span style="margin-left: 0.1rem; line-height: 0.18rem">{{
                item.label
              }}</span></el-option
            >
          </el-select>
          <el-button type="searchButton" style="width: 0.6rem">查询</el-button>
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :header-cell-style="{
              'text-align': 'center',
              'font-weight': 'normal',
              color: '#000',
              'background-color': 'rgb(232,232,232)',
            }"
            :cell-style="{ 'text-align': 'center' }"
            :footer-cell-style="{
              'text-align': 'center',
            }"
          >
            <el-table-column fixed prop="id" label="id" width="60" />
            <el-table-column prop="presenter" label="提交人" width="120" />
            <el-table-column prop="submissionTime" label="提交时间" />
            <el-table-column prop="state" label="状态" width="160">
              <template #default="scope">
                <span
                  :style="{
                    color: checkParticipantsNumberStateColor(scope.row.state),
                  }"
                  >{{ scope.row.state }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="obtainScore"
              label="获得评分"
              sortable
              width="180"
            />
            <el-table-column
              prop="awardSituation"
              label="获奖情况"
              width="180"
            />
            <el-table-column fixed="right" label="操作" width="180">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="participantsNumberOperateShowFunction">查看</el-button>
                <el-button
                  link
                  type="danger"
                  size="small"
                  v-if="scope.row.state == '已评审'"
                  @click="modifyScoreShow"
                  >修改评分</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <footer>
          <el-pagination
            v-show="total > 0"
            :total="total"
            background
            layout="prev, pager, next"
            v-model:page-size="queryParams.pageSize"
            v-model:current-page="queryParams.pageNum"
            @change="getList"
          />
        </footer>
      </body>
      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" @click="onClose">取 消</el-button>
          <el-button size="mini" type="primary" @click="onClose">确 定</el-button>
        </span>
      </template> -->
    </el-dialog>
    <!-- 修改评分弹窗 -->
    <modifyScore @refreshTable="refreshTable" v-model:dialogVisible="modifyScoreVisible"></modifyScore>
    <!-- 查看弹窗 -->
    <participantsNumberOperateShow v-model:dialogVisible="participantsNumberOperateShow"></participantsNumberOperateShow>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, toRefs, reactive, watch } from "vue";
import modifyScore from "@/views/components/dialog/modifyScore.vue";
import participantsNumberOperateShow from "@/views/components/dialog/participantsNumberOperateShow.vue";
import checkColor from "@/views/data/checkColor";
interface Props {
  dialogVisible: boolean;
}
interface State {
  visible: boolean;
}
export default defineComponent({
  name: "Dialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    modifyScore,
    participantsNumberOperateShow
  },
  setup(props, context) {
    const { dialogVisible } = toRefs(props as Props);
    const parent = { ...context };
    const state = reactive<State>({
      visible: dialogVisible.value,
    });
    watch(
      dialogVisible,
      (newValue) => {
        state.visible = newValue;
      },
      { immediate: true }
    );
    const onClose = () => {
      parent.emit("update:dialogVisible", false);
    };
    /**
     * 查询内容参数
     */
    const searchContent = reactive({
      keyWord: "",
      selected: "",
      timeRange: "",
    });
    /**
     * 查询选择参数
     */
    const selectedOptions = reactive([
      {
        value: "1",
        label: "待审核",
      },
      {
        value: "2",
        label: "待评审",
      },
      {
        value: "3",
        label: "已评审",
      },
    ]);
    /**
     * table表格参数
     */
    const tableData = reactive([
      {
        id: "1",
        presenter: "胡允",
        submissionTime: "2023-11-11 09:18:30",
        state: "待审核",
        obtainScore: "--",
        awardSituation: "--",
      },
      {
        id: "2",
        presenter: "张三",
        submissionTime: "2023-11-12 09:18:30",
        state: "待评审",
        obtainScore: "--",
        awardSituation: "--",
      },
      {
        id: "3",
        presenter: "李四",
        submissionTime: "2023-11-13 09:18:30",
        state: "已评审",
        obtainScore: "95",
        awardSituation: "--",
      },
      {
        id: "4",
        presenter: "王五",
        submissionTime: "2023-11-14 09:18:30",
        state: "已评审",
        obtainScore: "88",
        awardSituation: "--",
      },
      {
        id: "5",
        presenter: "赵六",
        submissionTime: "2023-11-14 09:18:30",
        state: "已评审",
        obtainScore: "91",
        awardSituation: "--",
      },
      {
        id: "6",
        presenter: "钱七",
        submissionTime: "2023-11-14 09:18:30",
        state: "已评审",
        obtainScore: "93",
        awardSituation: "--",
      },
    ]);
    /**
     * 获取根据状态显示颜色方法
     */
    const { checkParticipantsNumberStateColor } = checkColor();
    /**
     * 分页
     */
    let queryParams = reactive({
      pageSize: 10,
      pageNum: 5,
    });
    let total = ref(100);
    const getList = (a, b) => {
      console.log(a, b);
    };
    /**
     * 修改评分弹窗操作
     */
    const modifyScoreVisible = ref(false);
    const modifyScoreShow = () => {
      modifyScoreVisible.value = true;
    };
    /**
     * 查看弹窗操作
     */
     const participantsNumberOperateShow = ref(false);
     const participantsNumberOperateShowFunction = () => {
      participantsNumberOperateShow.value = true;
    };
    /**
     * 刷新table参数
     */
    const refreshTable = (value: string) =>{
      console.log("participantsNumberTable", value);
    }
    return {
      ...toRefs(state),
      onClose,
      refreshTable,
      searchContent,
      selectedOptions,
      tableData,
      checkParticipantsNumberStateColor,
      queryParams,
      total,
      getList,
      modifyScoreVisible,
      modifyScoreShow,
      participantsNumberOperateShow,
      participantsNumberOperateShowFunction
    };
  },
});
</script>
<style lang="scss" scoped>
.dialog-title {
  font-size: 0.1rem;
  font-weight: bold;
  text-align: center;
}
.searchContent {
  margin-bottom: 0.2rem;
}
footer {
  display: flex;
  justify-content: center;
  margin-top: 0.2rem;
}
.el-button--searchButton {
  color: #fff;
  background-color: rgb(61, 154, 184);
  border-color: rgb(61, 154, 184);
}
.el-button--searchButton:focus,
.el-button--searchButton:hover {
  color: #fff;
  background-color: rgb(61, 154, 184, 0.8);
  border-color: rgb(61, 154, 184, 0.8);
}
.el-button--searchButton:active {
  color: #fff;
  background-color: rgb(61, 134, 184);
  border-color: rgb(61, 134, 184);
}
</style>
